<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="
https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
"></script>
</head>
<body>
    <script>
        (function () {
    //1、实例化对象
    var myChart = echarts.init(document.querySelector(".map .chart"))

    var option = {
        //设置标题
        title: {
            text: '地图绘制',  // 主标题名称
            textStyle: {
                color: '#bce2e8',
                fontStyle: 'oblique',       //斜体
                fontFamily: 'monospace',    //字体
            },
            top: 20,
            left: 20
        },

        // 地图配置
        geo: {
            map: "china",
            //放大地图
            zoom: 1.25,
            //开启漫游
            roam: true,
            //让其文字出现在外地图上
            label: {
                // 通常状态下的文字样式
                normal: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                    },
                },
                // 鼠标放上去的样式
                emphasis: {
                    textStyle: {
                        color: "red",
                    },
                },
            },
            
            // 地图区域的样式设置
            itemStyle: {
                //配置正常状态下的样式
                normal: {
                    borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
                    borderWidth: 1, //设置地图区域边框的宽度
                    areaColor: {    //设置地图区域的填充色 -> 渐变色
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    },
                },
                // 鼠标放上去高亮的样式（在鼠标悬停状态下）
                emphasis: {
                    areaColor: "#389BB7",
                    borderWidth: 0,
                },
            },
        },


        series: [
            { 
                type: "scatter",    //设置为散点类型
                coordinateSystem: "geo",    //表示使用地理坐标系进行展示
                symbol: "pin",  //表示使用图钉形状的标记符号
                symbolSize: [80, 80],   //表示标记符号的尺寸为 50x50 
                // 这里渲染标志里的内容以及样式
                label: {  
                    show: true,
                    formatter(value) {//让他显示[113.23, 23.16, 12656.80]这个列表中的值
                        return value.data.value[2];
                    },
                    color: "#fff",
                },
                // 标志的样式
                itemStyle: {
                    normal: {
                        color: "rgba(255,0,0,.7)",
                        shadowBlur: 2,  //设置图表的阴影模糊大小为 2
                        shadowColor: "D8BC37",  //表示设置图表的阴影颜色为深黄色
                    },
                },
                // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
                // 至于如何展示，完全是靠上面的formatter来自己定义的
                data: [
                    { name: "广东", value: [113.23, 23.16, 12656.80] },
                    { name: "山东", value: [117.19, 36.65, 10162.79] },
                ],
            },
        ]

    }

    //3、把配置项给实例对象
    myChart.setOption(option)
})()

    </script>
</body>
</html>